import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as actions from './redux/actions'
import fetch from '@/utils/fetch'
import { ListView, SwiperView } from './'

export class IndexPage extends Component {
	constructor() {
		super()
		this.state = {
			nowPlayList: [],
			comingSoonList: []
		}
	}
  
  static propTypes = {
    children: PropTypes.node,
    index: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
    
  }

	componentDidMount() {
		fetch('/film/now-playing',null,res=> {
			this.setState({
				nowPlayList: res.films
			})
		})
		fetch('/film/coming-soon',null,res=> {
			this.setState({
				comingSoonList: res.films
			})
		})
	}

	render() {
		return (
			<div className="index-index-page bg-gray">
				<SwiperView films={this.state.comingSoonList}/>
				<div>
					<ListView films={this.state.nowPlayList}/>
					<ListView  films={this.state.comingSoonList}/>
				</div>
			</div>
		)
	}
}

/* istanbul ignore next */
function mapStateToProps(state) {
	return {
		index: state.index,
	}
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
	return {
		actions: bindActionCreators({ ...actions }, dispatch)
	}
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(IndexPage)
